<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>9.闭包</title>
</head>

<body>
  闭包两种情况：
  1. 函数作为参数被传递
  2. 函数作为返回值被返回

  注意：
  自由变量的查找，实在函数定义的地方向上级作用域查找，
  不是在执行的地方

  闭包的应用：
  1. 隐藏数据

  <script>
    // 1.函数作为返回值被返回
    /* function create() {
      const a = 100
      return function() {
        console.log(a);
      }
    }

    const fn = create()
    fn() */

    // 2.函数作为参数被传递
    function print(fn) {
      const a = 200
      fn()
    }
    const a = 100
    function fn() {
      console.log(a);
    }
    print(fn)

    // 闭包的应用
    // 1. 隐藏数据
    // function createCatch() {
    //   const data = {}
    //   return {
    //     set: function (key, val) {
    //       data[key] = val
    //     },
    //     get: function (key) {
    //       return data[key]
    //     }
    //   }
    // }

    // const c = createCatch()
    // c.set('a', 300)
    // console.log(c.get('a'));

    // 点击弹出序号
    /* let a
    for (let i = 0; i < 10; i++) {
      a = document.createElement('a')
      a.innerHTML = i + '<br>'

      a.addEventListener('click', function (e) {
        e.preventDefault()
        alert(i)
      })

      document.body.appendChild(a)
    } */

    /* let a
    for (var i = 0; i < 10; i++) {
      (function (i) {
        a = document.createElement('a')
        a.innerHTML = i + '<br>'

        a.addEventListener('click', function (e) {
          e.preventDefault()
          alert(i)
        })
        document.body.appendChild(a)
      })(i)
    } */



  </script>
</body>

</html>